import React, { Component } from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import {
  WeaFormItem,
  WeaLocaleProvider,
  WeaMoreButton,
  WeaDialog,
  WeaSearchGroup,
  WeaTools,
} from 'ecCom';
import { RenderForm } from '../util';

const getLabel = WeaLocaleProvider.getLabel;
const Base64 = WeaTools.Base64;
const MAILPAGENAME = 'TEMPLATEPREVIEW';

@inject('settingStore')
@observer
class Preview extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = `${props.class}-preview`;
  }

  getForm = (form, fields) => {
    const { isFormInit } = form;
    let group = [];
    let mouldtext = Base64.decode(form.getFormParams().mouldtext || '');
    isFormInit &&
      fields &&
      fields.map((c) => {
        let items = [];
        c.items.map((field) => {
          if (field.domkey[0] === 'mouldtext') {
            items.push({
              com: (
                <WeaFormItem
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_WeaFormItem@2apolg@${MAILPAGENAME}${field.domkey[0]}`}
                  label={`${field.label}`}
                  labelCol={{ span: `${field.labelcol}` }}
                  wrapperCol={{ span: `${field.fieldcol}` }}
                  className={`${this.preCls}-formItem`}
                  error={form.getError(field)}
                  tipPosition="bottom"
                >
                  <div
                    className={`${this.prefixCls}-content`}
                    dangerouslySetInnerHTML={{ __html: mouldtext }}
                  />
                </WeaFormItem>
              ),
            });
          } else {
            items.push({ com: RenderForm(form, field) });
          }
        });
        group.push(
          <WeaSearchGroup
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaSearchGroup@zt63e1@${MAILPAGENAME}form`}
            col={1}
            title={c.title}
            needTigger={true}
            showGroup={c.defaultshow}
            items={items}
          />,
        );
      });
    return group;
  };

  onDialogCancel = () => {
    const {
      settingStore: { templateStore },
    } = this.props;
    templateStore.setStoreState({ previewVisible: false });
  };

  render() {
    const {
      settingStore: { templateStore },
    } = this.props;
    const { previewVisible, previewForm, previewFields } = templateStore;
    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaDialog@2kzswc`}
        icon="icon-coms-email"
        iconBgcolor="#a0b0ba"
        title={getLabel(129751, '预览模板')}
        style={{ width: 900, height: 500 }}
        className={this.prefixCls}
        visible={previewVisible}
        onCancel={this.onDialogCancel}
        buttons={[
          <WeaMoreButton
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaMoreButton@sf0sfc@${MAILPAGENAME}more`}
          />,
        ]}
        hasScroll
      >
        {toJS(previewFields).length > 0 &&
          this.getForm(previewForm, previewFields)}
      </WeaDialog>
    );
  }
}

export default Preview;
